
import 'package:custom_pop_up_menu/custom_pop_up_menu.dart';
import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:yp/helper.dart';
import 'package:yp/router.dart';
import 'package:get/get.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:sp_util/sp_util.dart';
import 'package:yp/config/config.dart';

import 'logic.dart';
import 'state.dart';

class MyWalletPage extends StatefulWidget {
  
  @override
  State<StatefulWidget> createState() {
    return _MyWalletPage();
  }
}

class _MyWalletPage extends State<MyWalletPage> with TickerProviderStateMixin {
  final MyWalletLogic logic = Get.put(MyWalletLogic());
  final MyWalletState state = Get.find<MyWalletLogic>().state;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    state.tabController = TabController(length: 1, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF5F5F5),
      appBar: AppBar(
        centerTitle: true,
        elevation: 0,
        backgroundColor: Color(0xff0F0B0A),
        brightness: Brightness.dark,
        title: Text(
          '钱包',
          style: TextStyle(
            color: Colors.white,
            fontSize: 17,
          ),
        ),
        iconTheme: IconThemeData(
          color: Colors.white,
        ),
      ),
      body: GetBuilder<MyWalletLogic>(
        builder: (logic) {
          return Container(
            child: ListView.separated(
              scrollDirection: Axis.vertical,
              itemBuilder: (context, index) {
                if (index == 0) {
                  return Stack(
                    children: [
                      Container(
                        height: setWidth(200),
                        width: MediaQuery.of(context).size.width,
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: AssetImage("assets/images/wallet_image.png"),
                            fit: BoxFit.fitWidth,
                          ),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              logic.state.walletBalance == null ? "" : logic.state.walletBalance.toString(),
                              style: TextStyle(
                                color: Color(0xffFDD77A),
                                fontSize: 30,
                              ),
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Text(
                                  '钱包余额(元)',
                                  style: TextStyle(
                                    color: Color(0xffC99F4F),
                                    fontSize: 12,
                                  ),
                                ),
                                GestureDetector(
                                  onTap: () {
                                    print('问号点击事件！！！');
                                    Get.toNamed(RouteConfig.myWallerUseHelp);
                                  },
                                  behavior: HitTestBehavior.opaque,
                                  child: Container(
                                    width: setWidth(40),
                                    height: setWidth(40),
                                    child: Icon(
                                      Icons.help_outline_sharp,
                                      size: 15,
                                      color: Color(0xffC99F4F),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                      Positioned(
                        top: setWidth(10),
                        right: setWidth(20),
                        child: CustomPopupMenu(
                          child: Image.asset(
                            'assets/images/walletMore_image.png',
                            width: setWidth(40),
                            height: setWidth(40),
                            fit: BoxFit.cover,
                          ),
                          menuBuilder: () {
                            return ClipRRect(
                              borderRadius: BorderRadius.circular(5),
                              child: Container(
                                color: Colors.white,
                                child: IntrinsicWidth(
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.stretch,
                                    children: [['giftCard_image.png', '福利卡账单']].asMap().map((key, value) {
                                      List<String> array = value;
                                      return MapEntry(
                                        key,
                                        GestureDetector(
                                          behavior: HitTestBehavior.opaque,
                                          onTap: () {
                                            print('更多按钮 选择事件  key = $key, value = $value');
                                            if (key == 0) {
                                              Get.toNamed(RouteConfig.giftCardConsumptionRecord);
                                            } else {
                                              Get.toNamed(RouteConfig.giftCard);
                                            }
                                            state.customController.hideMenu();
                                          },
                                          child: Container(
                                            height: setWidth(80),
                                            padding: EdgeInsets.symmetric(horizontal: setWidth(20)),
                                            child: Row(
                                              children: [
                                                Image.asset(
                                                  'assets/images/${array[0]}',
                                                  width: setWidth(36),
                                                  height: setWidth(36),
                                                  fit: BoxFit.fill,
                                                ),
                                                SizedBox(
                                                  width: setWidth(20),
                                                ),
                                                Text(
                                                  '${array[1]}',
                                                  style: TextStyle(
                                                    color: Color(0xff0F0B0A),
                                                    fontSize: 14,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                      );
                                    }).values.toList(),
                                  ),
                                ),
                              ),
                            );
                          },
                          pressType: PressType.singleClick,
                          verticalMargin: 0,
                          controller: state.customController,
                          arrowColor: Colors.white,
                          showArrow: true,
                        ),
                      ),
                    ],
                  );
                } else if (index == 1) {
                  return Container(
                    width: MediaQuery.of(context).size.width,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          height: setWidth(100),
                          color: Colors.white,
                          alignment: Alignment.center,
                          child:Config.loginScreenStyle=='0'? TabBar(
                            controller: logic.state.tabController,
                            onTap: (index) {
                              if (index == 1) {
                                toast("暂未开放，敬请期待");
                                logic.state.tabController.animateTo(0);
                              }
                            },
                            isScrollable: false,
                            indicatorColor: Color(0xffC99F4F),
                            indicatorSize: TabBarIndicatorSize.label,
                            unselectedLabelColor: Color(0xff999999),
                            labelStyle: TextStyle(
                              fontSize: 18,
                            ),
                            labelColor: Color(0xffC99F4F),
                            tabs: <Widget>[
                              Tab(text: "福利卡"),
                              // Tab(text: "储值卡"),
                            ],
                          ):Container(
                            padding: EdgeInsets.only(top: 8,bottom: 8),
                            decoration: new BoxDecoration(
                               border: Border(
                                 bottom: BorderSide(
                                   width: 3,
                                   color: Color(0xffC99F4F),
                                 ),
                               )
                            ),
                            child: Text(
                              '福利卡',
                              style: TextStyle(
                                fontSize: 18,
                                color: Color(0xffC99F4F),
                              ),
                            ),
                          ),
                        ),
                        Container(
                          color: Color(0xffF5F5F5),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Container(
                                margin: EdgeInsets.only(top: 20, bottom: 10),
                                width: MediaQuery.of(context).size.width,
                                height: (MediaQuery.of(context).size.width - setWidth(36) * 2) * 130 / 300,
                                child: PageView.builder(
                                    controller: logic.pageController,
                                    itemCount: state.giftCardArray.length > 1 ? 2 : 1,
                                    itemBuilder: (BuildContext context, int index) {
                                      if (index == (state.giftCardArray.length > 1 ? 2 : 1) - 1) {
                                        return Container(
                                          width: MediaQuery.of(context).size.width,
                                          margin: EdgeInsets.symmetric(horizontal: setWidth(36), vertical: 1),
                                          child: DottedBorder(
                                            borderType: BorderType.RRect,
                                            color: Color(0xFFD2D2D2),
                                            child: Row(
                                              children: [
                                                Expanded(
                                                  child: TextButton(
                                                    style: ButtonStyle(
                                                      shadowColor: MaterialStateProperty.all(Colors.transparent),
                                                      elevation: MaterialStateProperty.all(0),
                                                      splashFactory: NoSplash.splashFactory
                                                    ),
                                                    child: Container(
                                                      child: Column(
                                                        mainAxisAlignment: MainAxisAlignment.center,
                                                        children: [
                                                          Icon(Icons.add, size: 50, color: Color(0xFFD2D2D2)),
                                                          Text("添加福利卡", style: TextStyle(color: Color(0xFFD2D2D2), fontSize: 14))
                                                        ],
                                                      )
                                                    ),
                                                    onPressed: () {
                                                      Get.toNamed(
                                                        RouteConfig.bindWelfareCard,
                                                      ).then((value) {
                                                        logic.getWelfareCardList();
                                                      });
                                                    },
                                                  )
                                                ),
                                              ],
                                            ),
                                          ),
                                        );
                                      } else {
                                        String phone = SpUtil.getString('number');
                                        String phoneStr = '${phone.substring(0, 4)}****${phone.substring(8, 11)}';
                                        return Container(
                                          width: MediaQuery.of(context).size.width,
                                          margin: EdgeInsets.symmetric(horizontal: setWidth(36)),
                                          decoration: BoxDecoration(
                                            borderRadius: BorderRadius.circular(setWidth(20)),
                                            gradient: LinearGradient(
                                              begin: Alignment.centerLeft,
                                              end: Alignment.centerRight,
                                              colors: [
                                                Color(0xffFFECC7),
                                                Color(0xffF3CD85),
                                              ],
                                            ),
                                          ),
                                          child: Container(
                                            child: Row(
                                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                              children: [
                                                Container(
                                                  margin: EdgeInsets.only(left: 30),
                                                  child: Text(
                                                    "$phoneStr的账户",
                                                    style: TextStyle(
                                                      color: Color(0xFFC99F4F),
                                                      fontWeight: FontWeight.bold
                                                    ),
                                                  ),
                                                ),
                                                Container(
                                                  margin: EdgeInsets.only(left: 30),
                                                  child: TextButton(
                                                    child: Row(
                                                      crossAxisAlignment: CrossAxisAlignment.center,
                                                      children: [
                                                        Text(
                                                          "共${state.validCardsArray.length - 1}张",
                                                          style: TextStyle(color: Color(0xFFC99F4F)),
                                                        ),
                                                        Icon(Icons.navigate_next, color: Color(0xFFC99F4F))
                                                      ],
                                                    ),
                                                    onPressed: () => Get.toNamed(RouteConfig.myWelfareCardList),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        );
                                      }
                                    }
                                ),
                              ),
                              if (state.giftCardArray.length > 0)
                                Center(
                                  child: SmoothPageIndicator(
                                    controller: logic.pageController,
                                    count: state.giftCardArray.length > 1 ? 2 : 1, // state.giftCardArray.length ?? 0,
                                    effect: ExpandingDotsEffect(
                                        dotHeight: 8,
                                        dotWidth: 8,
                                        dotColor: Color(0xFFCCCCCC),
                                        activeDotColor: Color(0xFFC99F4F)
                                      // strokeWidth: 5,
                                    ),
                                  ),
                                ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  );
                } else {
                  return Container(
                    // child: Column(
                    //   children: [
                    //     Container(
                    //       height: setWidth(84),
                    //       padding: EdgeInsets.symmetric(horizontal: setWidth(18)),
                    //       alignment: Alignment.centerLeft,
                    //       decoration: BoxDecoration(
                    //         color: Colors.white,
                    //         border: Border.all(
                    //           color: Color(0xffE7E7E7),
                    //           width: setWidth(1),
                    //         ),
                    //       ),
                    //       child: Text(
                    //         '购买礼品卡',
                    //         style: TextStyle(
                    //           color: Color(0xff222222),
                    //           fontSize: 16,
                    //         ),
                    //       ),
                    //     ),
                    //     Padding(
                    //       padding: EdgeInsets.only(
                    //         left: setWidth(40),
                    //         top: setWidth(38),
                    //         right: setWidth(40),
                    //       ),
                    //       child: Row(
                    //         mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    //         children: [
                    //           InkWell(
                    //             onTap: () {
                    //               print('全部 按钮点击事件 ！！！');
                    //               logic.onGiftCardClick(0);
                    //             },
                    //             child: Container(
                    //               width: setWidth(152),
                    //               height: setWidth(88),
                    //               decoration: BoxDecoration(
                    //                 borderRadius: BorderRadius.circular(setWidth(16)),
                    //                 border: Border.all(
                    //                   color: state.giftCardChoose == 0 ? Color(0xffc99f4f) : Color(0xffDCDFE6),
                    //                   width: setWidth(1),
                    //                 ),
                    //               ),
                    //               alignment: Alignment.center,
                    //               child: Text(
                    //                 '全部',
                    //                 style: TextStyle(
                    //                   color: Color(0xffc99f4f),
                    //                   fontSize: 18,
                    //                 ),
                    //               ),
                    //             ),
                    //           ),
                    //           InkWell(
                    //             onTap: () {
                    //               print('50元 按钮点击事件 ！！！');
                    //               logic.onGiftCardClick(1);
                    //             },
                    //             child: Container(
                    //               width: setWidth(152),
                    //               height: setWidth(88),
                    //               decoration: BoxDecoration(
                    //                 borderRadius: BorderRadius.circular(setWidth(16)),
                    //                 border: Border.all(
                    //                   color: state.giftCardChoose == 1 ? Color(0xffc99f4f) : Color(0xffDCDFE6),
                    //                   width: setWidth(1),
                    //                 ),
                    //               ),
                    //               alignment: Alignment.center,
                    //               child: Text(
                    //                 '50元',
                    //                 style: TextStyle(
                    //                   color: Color(0xffc99f4f),
                    //                   fontSize: 18,
                    //                 ),
                    //               ),
                    //             ),
                    //           ),
                    //           InkWell(
                    //             onTap: () {
                    //               print('100元 按钮点击事件 ！！！');
                    //               logic.onGiftCardClick(2);
                    //             },
                    //             child: Container(
                    //               width: setWidth(152),
                    //               height: setWidth(88),
                    //               decoration: BoxDecoration(
                    //                 borderRadius: BorderRadius.circular(setWidth(16)),
                    //                 border: Border.all(
                    //                   color: state.giftCardChoose == 2 ? Color(0xffc99f4f) : Color(0xffDCDFE6),
                    //                   width: setWidth(1),
                    //                 ),
                    //               ),
                    //               alignment: Alignment.center,
                    //               child: Text(
                    //                 '100元',
                    //                 style: TextStyle(
                    //                   color: Color(0xffc99f4f),
                    //                   fontSize: 18,
                    //                 ),
                    //               ),
                    //             ),
                    //           ),
                    //           InkWell(
                    //             onTap: () {
                    //               print('200元 按钮点击事件 ！！！');
                    //               logic.onGiftCardClick(3);
                    //             },
                    //             child: Container(
                    //               width: setWidth(152),
                    //               height: setWidth(88),
                    //               decoration: BoxDecoration(
                    //                 borderRadius: BorderRadius.circular(setWidth(16)),
                    //                 border: Border.all(
                    //                   color: state.giftCardChoose == 3 ? Color(0xffc99f4f) : Color(0xffDCDFE6),
                    //                   width: setWidth(1),
                    //                 ),
                    //               ),
                    //               alignment: Alignment.center,
                    //               child: Text(
                    //                 '200元',
                    //                 style: TextStyle(
                    //                   color: Color(0xffc99f4f),
                    //                   fontSize: 18,
                    //                 ),
                    //               ),
                    //             ),
                    //           ),
                    //         ],
                    //       ),
                    //     ),
                    //     Padding(
                    //       padding: EdgeInsets.only(
                    //         left: setWidth(40),
                    //         top: setWidth(40),
                    //         right: setWidth(40),
                    //       ),
                    //       child: Wrap(
                    //         spacing: setWidth(46),
                    //         runSpacing: setWidth(40),
                    //         children: state.giftCardArray[state.giftCardChoose].asMap().map((key, value) {
                    //           return MapEntry(key, _giftCardWidget(index: key, titleStr: value));
                    //         }).values.toList(),
                    //       ),
                    //     ),
                    //   ],
                    // ),
                  );
                }
              },
              separatorBuilder: (BuildContext context, int index) {
                return SizedBox(height: setWidth(0));
              },
              itemCount: 3,
            ),
          );
        },
      ),
    );
  }

  /// 礼品卡
  Widget _giftCardWidget({ int index, String titleStr}) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: setWidth(312),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(setWidth(10)),
                child: Image.asset(
                  'assets/images/home2bg1.png',
                  width: setWidth(312),
                  height: setWidth(200),
                  fit: BoxFit.cover,
                ),
              ),
              SizedBox(
                height: setWidth(20),
              ),
              Text(
                titleStr,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: Color(0xff333333),
                  fontSize: 14,
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text.rich(
                    TextSpan(
                      children: [
                        TextSpan(
                          text: '¥',
                          style: TextStyle(
                            color: Color(0xffc99f4f),
                            fontSize: 12,
                          ),
                        ),
                        TextSpan(
                          text: '100',
                          style: TextStyle(
                            color: Color(0xffc99f4f),
                            fontSize: 20,
                          ),
                        ),
                        TextSpan(
                          text: '.00',
                          style: TextStyle(
                            color: Color(0xffc99f4f),
                            fontSize: 12,
                          ),
                        ),
                      ],
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      print('立即购买  点击事件！！！！ index = $index');
                    },
                    child: Container(
                      width: setWidth(136),
                      height: setWidth(50),
                      decoration: BoxDecoration(
                        color: Color(0xffc99f4f),
                        borderRadius: BorderRadius.circular(setWidth(25)),
                      ),
                      alignment: Alignment.center,
                      child: Text(
                        '立即购买',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: setWidth(14),
              ),
            ],
          ),
        ),
      ],
    );
  }

}